<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师课程表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="6">
        <el-row>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="开始学年"
              v-model="startYear"
              class="max-width"
              @change="getYear">
            </el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="结束学年"
              v-model="endYear"
              class="max-width">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="">
          <el-select v-model="form.term" placeholder="请选择学期" class="max-width">
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right" @click="searchCourse">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <hr>
    <div class="mb-5 clearfix">
      <el-button-group style="margin-bottom:4px;" class="float-right">
        <el-button type="primary" class="add-pd-26" @click="toTPI">
          教学大纲
        </el-button>
        <el-button type="primary" class="add-pd-26" @click="toCSM">
          课程进度
        </el-button>
        <el-button type="primary" class="add-pd-26" @click="toTestPI">
          实验大纲
        </el-button>
        <el-button type="primary" class="add-pd-26" @click="toTDM">
          教学资料
        </el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo"
      border
      style="width: 100%"
      @select="selectEvent"
      :default-sort="{prop: 'courseID',order:'ascending'}">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="courseID"
        label="课程编号"
        min-width="160"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="160"
        sortable>
        <template scope="scope">
          <el-button @click.native.prevent="getCourseInfo(scope.row.trainingCourseID)" type="text">
            {{scope.row.courseName}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="credit"
        label="学分"
        min-width="160"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseHour"
        label="学时"
        min-width="160"
        sortable>
      </el-table-column>
      <el-table-column
        label="学时分配方式及时长">
        <el-table-column
          prop="teachHour"
          label="上课"
          min-width="70">
        </el-table-column>
        <el-table-column
          prop="computerHour"
          label="上机"
          min-width="70">
        </el-table-column>
        <el-table-column
          prop="experimentHour"
          label="实验"
          min-width="70">
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="weeklyHour"
        label="每周学时分配"
        min-width="160"
        sortable>
      </el-table-column>
      <el-table-column
        prop="scoringWay"
        label="记分方式"
        min-width="160">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'teacherCourseInfo',
    data() {
      return {
        form: {
          academicYear: '',
          term: ''
        },
        courseInfo: [],
        trainingCourseID: '',
        teacherCourseID: '',
        courseID: '',
        academicYear: '',
        startYear: '',
        endYear: '',
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created () {
      this.searchCourse()
    },
    methods: {
      searchCourse() {
        this.$http.post(`${this.url}/course/getCourseForTeacher`, this.form)
          .then((res) => {
            console.log(res.body)
            this.courseInfo = res.body.courseList
          }, (err) => {
            // 响应错误回调
            console.log('服务器异常')
          })
      },
      selectEvent(selection, row){
        this.trainingCourseID = row.trainingCourseID
        this.courseID = row.courseID
        this.teacherCourseID = row.teacherCourseID
      },
      getCourseInfo(trainingCourseID){
        this.$router.push({path: 'CourseBaseInfo', query: {trainingCourseID: trainingCourseID}})
      },
      getYear(val){
        this.endYear = (parseInt(val) + 1).toString()
        this.form.academicYear = val + '-' + this.endYear
      },
      toTPI(){
        this.$router.push({path: 'TeachingProgramInfo', query: {courseID: this.courseID}})
      },
      toCSM(){
        this.$router.push({path: 'CourseScheduleManage', query: {teacherCourseID: this.teacherCourseID}})
      },
      toTestPI(){
        this.$router.push({path: 'TestProgramInfo', query: {teacherCourseID: this.teacherCourseID}})
      },
      toTDM(){
        this.$router.push({path: 'TeachingDocumentManage', query: {courseID: this.courseID}})
      }
    },
    computed: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }

  .add-pd-26 {
    padding-left: 1.6em;
    padding-right: 1.6em;
  }

  .clear-a {
    text-decoration: none;
    color: #fff
  }
</style>
